<template>
  <div class="spotCheck">
    <el-card>
      <div class="spotCheck-header">
        <div class="spotCheck-header-title">抽查检查</div>
        <div class="spotCheck-header-tabs">
          <div
            :class="
              defaultActive === it.route
                ? 'spotCheck-header-tabs-items spotCheck-header-tabs-items-ac'
                : 'spotCheck-header-tabs-items'
            "
            v-for="it in page"
            :key="it"
            @click="select(it.name)"
          >
            {{ it.name }}
          </div>
        </div>
      </div>
      <router-view />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

console.log('route', route)
defineOptions({
  name: 'SpotCheck'
})

const menuStatus = ref(false)
const page = [
  {
    name: '合格组织抽查',
    route: 'QualifiedSpotChecks'
  },
  // {
  //   name: '风险异常组织抽查',
  //   route: 'SpotCheckForAnomalies'
  // },
  {
    name: '检查管理',
    route: 'InspectionManagement'
  }
]

const defaultActive = ref(route.name)

const select = (e) => {
  defaultActive.value = page.find((i) => i.name === e).route
  router.push({
    name: page.find((i) => i.name === e).route
  })
}
</script>
<style lang="scss" scoped>
.spotCheck-content {
  width: 100%;
  min-height: 500px;
  &-search {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px;
  }
}
.spotCheck-header-tabs {
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e9e9e9;
  &-items {
    height: 100%;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    cursor: pointer;
    border-right: 1px solid #e9e9e9;
  }
  &-items:last-child {
    border-right: unset;
  }
  &-items:hover {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 18px;
    color: #1c85ff;
    position: relative;
  }
  &-items:hover::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #1c85ff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
  }
  &-items-ac {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 18px;
    color: #1c85ff;
    font-weight: 500;
    position: relative;
  }
  &-items-ac::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #1c85ff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.spotCheck-content-tabs {
  width: 100%;
  height: 70px;
  display: flex;
  border: 1px solid #e9e9e9;
  position: relative;
  &-content {
    flex: 1;
    height: 100%;
    box-sizing: border-box;

    display: flex;
    justify-content: space-around;
    align-items: center;
    &-title {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
      margin-top: 15px;
      cursor: pointer;
    }
    &-ac {
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      position: relative;
    }
    &-ac::after {
      content: '';
      height: 4px;
      width: 60%;
      position: absolute;
      bottom: -17px;
      right: 0;
      left: 0;
      margin: auto;
      background: #1c85ff;
      border-radius: 0px 0px 0px 0px;
    }
  }
  &-rig {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 26px;
      height: 26px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>
